<template>
	<view class="container">
		
		<!-- 设置选项组 -->
		<view class="settings-group">
			<view class="group-title">
				<uni-icons type="person-filled" size="18" color="#e93323"></uni-icons>
				<text class="title-text">个人信息</text>
			</view>
			<view class="settings-list">
				<view class="list-item" @click="changeAvatar">
					<view class="item-left">
						<uni-icons type="person" size="20" color="#666"></uni-icons>
						<text class="item-title">头像</text>
					</view>
					<view class="item-right">
						<image :src="form.avatar" class="item-avatar" mode="aspectFill"></image>
						<uni-icons type="forward" size="16" color="#c0c4cc"></uni-icons>
					</view>
				</view>
				<view class="list-item">
					<view class="item-left">
						<uni-icons type="contact" size="20" color="#666"></uni-icons>
						<text class="item-title">昵称</text>
					</view>
					<view class="item-right">
						<uni-easyinput class="nickname-input" v-model="form.nickname" placeholder="请输入昵称" :styles="nickStyle"></uni-easyinput>
					</view>
				</view>
				<view class="list-item" @click="setPhone">
					<view class="item-left">
						<uni-icons type="phone" size="20" color="#666"></uni-icons>
						<text class="item-title">手机号</text>
					</view>
					<view class="item-right">
						<text class="item-value">点击修改</text>
						<uni-icons type="forward" size="16" color="#c0c4cc"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		
		<view class="settings-group">
			<view class="group-title">
				<uni-icons type="locked" size="18" color="#e93323"></uni-icons>
				<text class="title-text">安全设置</text>
			</view>
			<view class="settings-list">
				<view class="list-item" @click="setPassword">
					<view class="item-left">
						<uni-icons type="locked" size="20" color="#666"></uni-icons>
						<text class="item-title">修改密码</text>
					</view>
					<view class="item-right">
						<text class="item-value">点击修改</text>
						<uni-icons type="forward" size="16" color="#c0c4cc"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		
		<view class="settings-group">
			<view class="group-title">
				<uni-icons type="info" size="18" color="#e93323"></uni-icons>
				<text class="title-text">关于</text>
			</view>
			<view class="settings-list">
				<view class="list-item">
					<view class="item-left">
						<uni-icons type="info" size="20" color="#666"></uni-icons>
						<text class="item-title">当前版本</text>
					</view>
					<view class="item-right">
						<text class="item-value">{{ version }}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 操作按钮 -->
		<view class="action-buttons">
			<view class="action-btn save-btn" @click="save">
				<uni-icons type="checkmarkempty" size="20" color="#909399"></uni-icons>
				<text class="btn-text">保存修改</text>
			</view>
			<view class="action-btn logout-btn" @click="toLogout">
				<uni-icons type="closeempty" size="20" color="#909399"></uni-icons>
				<text class="btn-text">退出登录</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		BASE_URL,
		HEADER,
		TOKEN
	} from '@/config/app';
	import store from '@/store';
	import {
		goLogin,
		loginOut
	} from '@/libs/login';
	import {
		UID
	} from '@/config/cache';
	import Cache from '@/utils/cache';
	
	export default {
		data() {
			return {
				nickStyle: {
					borderColor: '#fff',
					color: '#909399',
					backgroundColor: '#f8f9fa'
				},
				version: '', // 版本
				uid: '', // 用户ID
				form: {
					avatar: '',
					nickname: ''
				}
			};
		},
		mounted() {
			this.getUserInfo()
		},
		methods:{
			// 获取用户信息
			async getUserInfo() {
				let res = await this.$api.user.getUserInfo.get()
				let userInfo = res.data.userInfo
				this.version = res.data.version
				this.uid = Cache.get(UID) || ''
				
				this.form.avatar = userInfo.avatar
				this.form.nickname = userInfo.nickname
			},
			// 保存用户信息
			async save() {
				uni.showLoading({
					title: '上传中...'
				});
				let res = await this.$api.user.update.post(this.form)
				uni.hideLoading();
				if (res.code == 0) {
					this.$tool.msg(res.msg)
				} else {
					this.$tool.msg(res.msg)
				}
			},
			// 头像上传
			changeAvatar() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album'],
					success: (file) => {
						uni.showLoading({
							title: '上传中...'
						});
						uni.uploadFile({
							url: BASE_URL + '/api/Common/uploadFile',
							filePath: file.tempFilePaths[0],
							name: 'file',
							success: (result) => {
								uni.hideLoading();
								let res = JSON.parse(result.data)
								if (res.code != 0) {
									this.$tool.msg(res.msg)
									return 
								}
								this.form.avatar = res.data.url
							}
						});
					}
				});
			},
			// 设置新手机号
			setPhone() {
				uni.navigateTo({
					url: '/pages/set/phone'
				}) 
			},
			// 设置密码
			setPassword() {
				uni.navigateTo({
					url: '/pages/set/password'
				}) 
			},
			// 退出
			toLogout() {
				uni.showLoading({
					title: '操作中...'
				});
				if (loginOut()) {
					uni.removeStorageSync('uid')
					uni.hideLoading();
					this.$tool.msg('退出成功')
					setTimeout(() => {
						goLogin()
					}, 800)
					
				}
			},
		}
	}
</script>

<style lang='scss' scoped>

	.container {
		padding: 20upx;
		height: 100vh;
		background: #f4f4f4;
	}
	
	// 设置组
	.settings-group {
		background: #fff;
		border-radius: 20upx;
		margin-bottom: 20upx;
		overflow: hidden;
		
		.group-title {
			padding: 25upx 30upx 15upx;
			display: flex;
			align-items: center;
			background: linear-gradient(to right, #f8f9fa, #fff);
			
			.title-text {
				font-size: 28upx;
				font-weight: 600;
				color: #333;
				margin-left: 15upx;
			}
		}
		
		.settings-list {
			.list-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 25upx 30upx;
				transition: all 0.3s ease;
				position: relative;
				
				&:not(:last-child)::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 80upx;
					right: 30upx;
					height: 1px;
				}
				
				&:active {
					background: #f9f9f9;
				}
				
				.item-left {
					display: flex;
					align-items: center;
					flex: 1;
					
					.item-title {
						font-size: 30upx;
						color: #333;
						margin-left: 20upx;
						font-weight: 500;
					}
				}
				
				.item-right {
					display: flex;
					align-items: center;
					
					.item-avatar {
						width: 60upx;
						height: 60upx;
						border-radius: 30upx;
						margin-right: 15upx;
					}
					
					.item-value {
						font-size: 28upx;
						color: #909399;
						margin-right: 10upx;
					}
					
					.nickname-input {
						min-width: 200upx;
					}
				}
			}
		}
	}
	
	// 操作按钮
	.action-buttons {
		margin-top: 40upx;
		
		.action-btn {
			height: 90upx;
			border-radius: 45upx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 20upx;
			transition: all 0.3s ease;
			box-shadow: 0 8upx 20upx rgba(0,0,0,0.1);
			
			.btn-text {
				color: #909399;
				font-size: 32upx;
				font-weight: 600;
				margin-left: 10upx;
			}
			
			&.save-btn {
				background: #fff;
				border: 1px solid #e0e0e0;
				
				&:active {
					transform: scale(0.98);
					background: #f5f5f5;
				}
			}
			
			&.logout-btn {
				background: #fff;
				border: 1px solid #e0e0e0;
				
				&:active {
					transform: scale(0.98);
					background: #f5f5f5;
				}
			}
		}
	}
	
	// 动画
	@keyframes float {
		0%, 100% {
			transform: translate(0, 0) rotate(0deg);
		}
		33% {
			transform: translate(30px, -30px) rotate(120deg);
		}
		66% {
			transform: translate(-20px, 20px) rotate(240deg);
		}
	}
</style>
